<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		        * {
		            margin: 0;
		            padding: 0;
		        }
		        table {
		          width: 900px;
		            border-collapse: collapse;
		            margin: 10px auto;
		            text-align: center;
					
		        }
		        th,td {
		          /*  border: 1px solid black; */
					height: 100px;
				
		        }
		        th {
		            background-color: lightcoral;
		        }
		        button {
		            padding: 1px 5px;
		        }
		    </style>
		</head>
		<body>
		    <table>
		        <tbody id="tbodyOld">
		            <tr>
		                <th>序号</th>
		                <th>商品名称</th>
		                <th>数量</th>
		                <th>单价</th>
		                <th>小计</th>
		                <th>操作</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td><img src="img/努比亚手机-官方网站/162149083928.png" style="width: 80px;height: 80px;"></td>
		                <td>
		                    <button>-</button>
		                    <span class="num">0</span>
		                    <button>+</button>
		                </td>
		                <td>
		                    单价：<span class="unit-price">45</span>
		                </td>
		                <td>
		                    小计：<span class="sub-total">0</span>
		                </td>
		                <td>
		                    操作：<input type="button" value="删除">
		                </td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td><img src="img/努比亚手机-官方网站/16148646134.png"  style="width: 80px;height: 80px;"></td>
		                <td>
		                    <button>-</button>
		                    <span class="num">0</span>
		                    <button>+</button>
		                </td>
		                <td>
		                    单价：<span class="unit-price">199</span>
		                </td>
		                <td>
		                    小计：<span class="sub-total">0</span>
		                </td>
		                <td>
		                    操作：<input type="button" value="删除">
		                </td>
		            </tr>
		            <tr>
		                <td colspan="6">商品一共<span id="total-num">0</span>件，共计花费<span id="total-price">0</span>元；</td>
		            </tr>
		        </tbody>
		    </table>
		    <table>
		        <tbody>
		            <tr>
		                <th>序号</th>
		                <th>商品名称</th>
		                <th>单价</th>
		                <th>操作</th>
		            </tr>
		            <tr>
		                <td>1</td>
		                <td><img src="img/努比亚手机-官方网站/15903750851.png"  style="8width: 80px;height: 80px;"></td>
		                <td>
		                    单价：<span class="unit-price">99</span>
		                </td>
		                <td>
		                    操作：<input type="button" value="添加" class="add">
		                </td>
		            </tr>
		            <tr>
		                <td>2</td>
		                <td><img src="img/努比亚手机-官方网站/162210139547.png" style="width: 100px;height: 100px;"></td>
		                <td>
		                    单价：<span class="unit-price">2099</span>
		                </td>
		                <td>
		                    操作：<input type="button" value="添加" class="add">
		                </td>
		            </tr>
		        </tbody>
		    </table>
		</body>
		</html>
		
		<script>
		    class Cart{
		        constructor(oTbodyOld,nameSet){
		            this.oTbodyOld = oTbodyOld;
		            this.nameSet = nameSet;
		            this.eventBind();
		        }
		
		
		        updateTotalPrice(){
		            let oSubTotal = document.querySelectorAll(".sub-total");
		            let totalPrice = 0;
		            for(let i=0; i<oSubTotal.length; i++){
		                totalPrice += Number(oSubTotal[i].innerHTML);
		            }
		            let oTotalPrice = document.querySelector("#total-price");
		            oTotalPrice.innerHTML = totalPrice;
		        }
		
		
		        updateTotalNum(){
		            let oNum = document.querySelectorAll(".num");
		            let totalNum = 0;
		            for(let i=0; i<oNum.length; i++){
		                totalNum += Number(oNum[i].innerHTML);
		            }
		            let oTotalNum = document.querySelector("#total-num");
		            oTotalNum.innerHTML = totalNum;
		        }
		
		
		        calcSubTotal(num,price){
		            return num * price;
		        }
		
		  
		        addNum(btn){
		      
		            let oNum = btn.previousElementSibling;
		            oNum.innerHTML = Number(oNum.innerHTML) + 1;
		   
		            let oUnitPrice = btn.parentNode.nextElementSibling.firstElementChild;
		
		    
		            let oSubTotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
		
		            oSubTotal.innerHTML = this.calcSubTotal(oNum.innerHTML,oUnitPrice.innerHTML);
		
		
		            this.updateTotalNum();
		            this.updateTotalPrice();
		        }
		
		
		        subNum(btn){
		  
		            let oNum = btn.nextElementSibling;
		            oNum.innerHTML = Number(oNum.innerHTML) - 1;
		            if(oNum.innerHTML <= 0){
		                oNum.innerHTML = 0;
		            }
		
		            let oUnitPrice = btn.parentNode.nextElementSibling.firstElementChild;
		
		      
		            let oSubTotal = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
		
		            oSubTotal.innerHTML = this.calcSubTotal(oNum.innerHTML,oUnitPrice.innerHTML);
		
		            this.updateTotalNum();
		            this.updateTotalPrice();
		        }
		
		
		        delAll(btn){
		            let oTr = btn.parentNode.parentNode;
		
		            if(this.nameSet.has(oTr.children[1].innerHTML)){
		                this.nameSet.delete(oTr.children[1].innerHTML);
		            }
		            oTr.remove();
		            
			
		            this.updateTotalNum();
		            this.updateTotalPrice();
		        }
		
			
		        addGoods(btn,index){
		
		            let oNewName = btn.parentNode.previousElementSibling.previousElementSibling.innerHTML;
			
		            let oNewSubTotal = btn.parentNode.previousElementSibling.firstElementChild.innerHTML;
			
		            let newNum = this.oTbodyOld.children.length - 1;
		
			
		            let oNewTr = document.createElement("tr");
		            oNewTr.innerHTML = 
		            `<td>${newNum}</td>
		            <td>${oNewName}</td>
		            <td>
		                <button>-</button>
		                <span class="num">0</span>
		                <button>+</button>
		            </td>
		            <td>
		                单价：<span class="unit-price">${oNewSubTotal}</span>
		            </td>
		            <td>
		                小计：<span class="sub-total">0</span>
		            </td>
		            <td>
		                操作：<input type="button" value="删除">
		            </td>`
		            if(this.nameSet.has(oNewTr.children[1].innerHTML)){
		                this.addNum(this.oTbodyOld.children[3+index].children[2].children[2]);
		            }else{
		                this.oTbodyOld.insertBefore(oNewTr,this.oTbodyOld.lastElementChild);
		                this.nameSet.add(oNewTr.children[1].innerHTML);
		            }
		        }
		
		        eventBind(){
		            let that = this;
		            this.oTbodyOld.onclick = function(evt){
		                let e = evt || event;
		                let target = e.target || e.srcElement;
		                if(target.innerHTML == "-"){
		                    that.subNum(target);
		                }else if(target.innerHTML == "+"){
		                    that.addNum(target);
		                }else if(target.tagName == "INPUT"){
		                    that.delAll(target);
		                }
		            }
		
		            let oAdd = document.querySelectorAll(".add");
		            for(let i=0; i<oAdd.length; i++){
		                oAdd[i].onclick = function(){
		                    that.addGoods(this,i);
		                }
		            }
		        }
		    }
		    let nameSet = new Set();
		    let oTbodyOld = document.querySelector("#tbodyOld");
		    let cart = new Cart(oTbodyOld,nameSet);
		</script>